<template>
  <div class="register-container">
    <div class="register-box">
      <div class="box-header">
        <h3>轻聘网 - 招聘端注册</h3>
      </div>
      <el-form ref="registerForm" :model="registerForm" :rules="rules" label-width="150px">
        <el-form-item label="公司选择" prop="companyId">
          <el-select v-model="registerForm.companyId" placeholder="请选择公司" style="width: 70%">
            <el-option
              v-for="item in companyOptions"
              :key="item.companyId"
              :label="item.companyName"
              :value="item.companyId"
            />
          </el-select>
          <router-link class="my-link" to="/register/company">公司未在轻聘网注册，点击注册-></router-link>
        </el-form-item>
        <el-form-item label="公司密令" prop="secret" style="width: 80%">
          <el-input v-model="registerForm.secret" placeholder="请输入公司密令" />
        </el-form-item>
        <el-form-item>
          <el-button type="success" plain icon="el-icon-s-promotion" @click="submitSecret">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getCompanyOptions, compareSecret } from '@/api/register'
export default {
  name: 'CompanyRegister',
  data() {
    return {
      registerForm: {
        companyId: undefined,
        secret: undefined
      },
      companyOptions: undefined,
      rules: {
        secret: { required: true, message: '请输入密令', trigger: 'blur' },
        companyId: { required: true, message: '请选择公司', trigger: 'change' }
      }
    }
  },
  mounted() {
    document.querySelector('body').setAttribute('style', 'background-color:#F2F5F4')
    this.getCompanyList()
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
  methods: {
    // 加载公司列表
    getCompanyList() {
      getCompanyOptions().then(
        (response) => {
          this.companyOptions = response.data
        },
        (error) => {
          this.$message.error(error.message)
        }
      )
    },
    // 提交公司及密令
    submitSecret() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          compareSecret(this.registerForm).then(
            (response) => {
              console.log('跳转到注册页面')
            },
            (error) => {
              this.$message.error(error.message)
            }
          )
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .register-container{
    margin-top: 200px;
  }
  .register-box {
    background: #ffffff;
    margin: 0 auto;
    width: 30%;
    padding-bottom: 20px;
  }
  .box-header {
    padding: 20px;
    text-align: center;
    color: #00b38a;
  }
  .avatar{
    width: 100px;
    height: 100px;
  }
  .my-link {
    display: inline-block;
    color: #20a0ff;
  }
</style>
